<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Hello React!</title>
		<script src="//www.w3cschool.cn/statics/assets/react/react.min.js"></script>
		<script src="//www.w3cschool.cn/statics/assets/react/react-dom.min.js"></script>
		<script src="//www.w3cschool.cn/statics/assets/react/babel.min.js"></script>
	</head>
	<body>
		<div id="timer-example"></div>
		<script type="text/babel">
			class Timer extends React.Component {
				constructor(props) {
					super(props);
					this.state = { seconds: 0 };
				}

				tick() {
					this.setState(state => ({
						seconds: state.seconds + 1
					}));
				}

				componentDidMount() {
					this.interval = setInterval(() => this.tick(), 1000);
				}

				componentWillUnmount() {
					clearInterval(this.interval);
				}

				render() {
					return (
						<div>
							Seconds: {this.state.seconds}
						</div>
					);
				}
			}

			ReactDOM.render(
				<Timer />,
				document.getElementById('timer-example')
			);
		</script>
	</body>
</html>
